<template>
  <div class="container">
    <div class="topCon">
      <div class="topTitle">
        <h2>
          <i class="icon iconfont iconfanhui1" @click="goBack"></i>
          {{ titleText }}
          <div
            style="display: inline-block; vertical-align: top"
            v-show="companyInfo.status === 'APPROVED'"
          >
            <el-tag style="vertical-align: middle">{{ serverName }}</el-tag>
            <el-tag style="vertical-align: middle"
              >版本号：{{ version }}</el-tag
            >
          </div>
          <div style="display: inline-block; float: right">
            <el-button type="primary" class="actionBtn" @click="toUpdate"
              >修改对接信息</el-button
            >
          </div>
        </h2>
      </div>
    </div>
    <div class="mainCon">
      <div class="checkResultBox clearfix">
        <div class="fl">
          <i
            class="iconfont iconyiqueren editIcon"
            v-show="companyInfo.status === 'APPROVED'"
          ></i>
          <i
            class="iconfont iconshibai1 delIcon"
            v-show="companyInfo.status === 'REJECTED'"
          ></i>
        </div>
        <div class="resultInfo fl">
          <el-row class="resultTop">
            审核结果：
            <span
              :class="{
                editIcon: companyInfo.status === 'APPROVED',
                delIcon: companyInfo.status === 'REJECTED',
              }"
              >{{ companyInfo.statusName }}</span
            >
          </el-row>
          <el-row class="resultBottom">
            <span> 审核人：{{ checktor }} </span>
            <span> 审核时间：{{ checkTime }} </span>
            <span v-if="companyInfo.status === 'APPROVED'">
              单位账号：{{ companyInfo.username }}
            </span>
            <span v-else> 不通过原因：{{ rejectReason }} </span>
          </el-row>
        </div>
      </div>
      <div class="companyInfoBox">
        <el-row class="itemTitle editIcon"> 申请信息 </el-row>
        <el-row
          class="itemInfo"
          :gutter="20"
          v-if="companyInfo.inputTypeName != '工程项目'"
        >
          <el-col :md="12" :lg="8" :xl="6" class="ellipsis">
            <label>单位类型：</label>
            <span>{{ companyInfo.inputTypeName }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>单位名称：</label>
            <span :title="companyInfo.name">{{ companyInfo.name }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>统一社会信用代码：</label>
            <span>{{ companyInfo.uscc }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6" class="ellipsis">
            <label>负责人姓名：</label>
            <span>{{ companyInfo.linkman }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>负责人手机号：</label>
            <span>{{ companyInfo.tel }}</span>
          </el-col>
        </el-row>
        <el-row class="itemInfo" :gutter="20" v-else>
          <el-col :md="12" :lg="8" :xl="6" class="ellipsis">
            <label>单位类型：</label>
            <span>{{ companyInfo.inputTypeName }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>项目名称：</label>
            <span :title="companyInfo.name">{{ companyInfo.name }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>建设方：</label>
            <span>{{ companyInfo.pbName }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>施工方：</label>
            <span>{{ companyInfo.pcName }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6" class="ellipsis">
            <label>负责人姓名：</label>
            <span>{{ companyInfo.linkman }}</span>
          </el-col>
          <el-col :md="12" :lg="8" :xl="6">
            <label>负责人手机号：</label>
            <span>{{ companyInfo.tel }}</span>
          </el-col>
        </el-row>
      </div>
      <div class="applyInfoBox">
        <el-row class="itemTitle yellow"> 认证资料 </el-row>
        <el-row class="imgBoxs clearfix">
          <div class="itemBox">
            <div class="imgBox licenseBox">
              <el-image
                style="width: 125.3px; height: 177px"
                :src="bailmentImg"
                :preview-src-list="bailmentList"
              >
              </el-image>
            </div>
            <span>申请接入凭证</span>
          </div>
          <div class="itemBox" v-if="companyInfo.inputTypeName != '工程项目'">
            <div class="imgBox licenseBox">
              <el-image
                style="width: 125.3px; height: 177px"
                :src="licenseImg"
                :preview-src-list="licenseList1"
              >
              </el-image>
            </div>
            <span>营业执照</span>
          </div>
          <div class="itemBox">
            <div class="imgBox idcardBox">
              <el-image
                style="width: 172.4px; height: 107px"
                :src="idcardFront"
                :preview-src-list="idcardList2"
              >
              </el-image>
            </div>
            <span>负责人身份证正面</span>
          </div>
          <div class="itemBox">
            <div class="imgBox idcardBox">
              <el-image
                style="width: 172.4px; height: 107px"
                :src="idcardBack"
                :preview-src-list="idcardList3"
              >
              </el-image>
            </div>
            <span>负责人身份证反面</span>
          </div>
        </el-row>
      </div>
      <div class="alignCenter">
        <el-button size="medium" class="backBtn" @click="goBack"
          >返回</el-button
        >
      </div>
    </div>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      :modal-append-to-body="false"
    >
      <el-form
        :model="dialogFormData"
        :rules="dialogFormRules"
        ref="dialogFormData"
        label-width="120px"
        class="demo-formData"
      >
        <el-row>
          <el-form-item prop="type" label="单位类型" class="row-padding-bottom">
            <el-input
              v-model="typeName"
              :disabled="true"
              placeholder="请输入单位类型"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item prop="name" label="单位名称" class="row-padding-bottom">
            <el-input
              v-model="dialogFormData.name"
              :disabled="true"
              placeholder="请输入单位名称"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="linkman"
            label="负责人姓名"
            class="row-padding-bottom"
          >
            <el-input
              v-model="dialogFormData.linkman"
              placeholder="请输入单位名称"
            />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item
            prop="tel"
            label="负责人手机号"
            class="row-padding-bottom"
          >
            <el-input
              v-model="dialogFormData.tel"
              placeholder="请输入单位名称"
            />
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="btnGroup">
        <el-button @click="cancel" class="cancel">取 消</el-button>
        <el-button
          type="primary"
          class="save"
          @click.native="saveFrom"
          :loading="isSaveLoading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'accountCheckDetailPage',
  data() {
    return {
      titleText: '单位审核详情页',
      id: '', //列表id
      checkState: '', //审核状态
      checktor: '', //审核人
      checkTime: '', //审核时间
      companyAccount: '', //企业账号
      rejectReason: '', //不通过原因
      serverName: '',
      version: '',
      isEnable: '',
      colorType: '',
      companyInfo: {
        inputTypeName: '',
        inputType: '',
        name: '', //企业名称
        uscc: '', //uscc
        linkman: '',
        tel: '',
        username: '',
        type: '',
        statusName: '',
        status: '',
        pbName: '',
        pcName: '',
        enabled: '',
        enabledName: '',
        password: '',
      },
      bailmentImg: '',
      licenseImg: '',
      idcardFront: '',
      idcardBack: '',
      bailmentList: [],
      licenseList1: [],
      idcardList2: [],
      idcardList3: [],
      back: true,
      dialogVisible: false,
      dialogTitle: '修改账号信息',
      isSaveLoading: false,
      typeName: '',
      dialogFormData: {
        id: '',
        type: '',
        name: '',
        linkman: '',
        tel: '',
        status: '',
        enabled: '',
        username: '',
        password: '',
      },
      dialogFormRules: {
        type: [{ required: true, message: '请输入单位类型', trigger: 'blur' }],
        name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
        linkman: [
          { required: true, message: '请输入负责人姓名', trigger: 'blur' },
        ],
        tel: [
          { required: true, message: '请输入负责人手机号', trigger: 'blur' },
        ],
      },
    }
  },
  computed: {},
  created() {
    this.id = this.$route.query.id
    this.getDetail(this.id)
    this.getVersion(this.id)
    this.getFiles(this.id)
    $('body').on('click', '.el-image-viewer__canvas', function () {
      $('.el-icon-circle-close').click()
    })
  },
  methods: {
    //开启loading
    openFullScreen() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)',
      })
      return loading
    },
    closeFullScreen(loading) {
      loading.close()
    },
    getDetail(id) {
      this.axios({
        method: 'post',
        url: 'api-m/inputUser/base/v1/detail',
        data: {
          id: id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            let result = res.data.result
            this.getLog(this.id, result.status)
            this.companyInfo.inputTypeName = result.inputTypeName
            this.companyInfo.inputType = result.inputType
            this.companyInfo.name = result.name
            this.companyInfo.uscc = result.uscc
            this.companyInfo.linkman = result.linkman
            this.companyInfo.tel = result.tel
            this.companyInfo.username = result.username
            this.companyInfo.type = result.type
            this.companyInfo.statusName = result.statusName
            this.companyInfo.status = result.status
            this.companyInfo.pbName = result.pbName
            this.companyInfo.pcName = result.pcName
            this.companyInfo.enabled = result.enabled
            this.companyInfo.enabledName = result.enabledName
            this.companyInfo.password = result.password
            if (result.enabled === 'ENABLED') {
              this.isEnable = '停用应用'
              this.colorType = 'danger'
            } else {
              this.isEnable = '启用应用'
              this.colorType = 'success'
            }
          }
        })
        .catch((error) => {})
    },
    getLog(id, type) {
      this.axios({
        method: 'post',
        url: 'api-m/inputUserLog/base/v1/list',
        data: {
          userId: id,
          type: type,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            let result = res.data.result[0]
            this.checktor = result.operatorName
            this.checkTime = moment(result.operatorTime).format('YYYY.MM.DD')
            this.checkState = result.typeName
            this.rejectReason = result.remark
          }
        })
        .catch((error) => {})
    },
    getVersion(id) {
      this.axios({
        method: 'post',
        url: 'api-m/inputUserServer/base/v1/list',
        data: {
          userId: id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            let result = res.data.result[0]
            this.serverName = result.serverName
            this.version = result.version
          }
        })
        .catch((error) => {})
    },
    getFiles(id) {
      this.axios({
        method: 'post',
        url: 'api-f/files/list',
        data: {
          associatedName: 'T_SYS_INPUT_USER',
          associatedId: id,
        },
      })
        .then((res) => {
          if (!res.data.hasError) {
            let result = res.data.result
            //   this.bailmentImg = result[0].absolutePath;
            //   this.bailmentList.push(result[0].absolutePath);
            //   this.licenseImg = result[1].absolutePath;
            //   this.licenseList1.push(result[1].absolutePath);
            //   this.idcardFront = result[2].absolutePath;
            //   this.idcardList2.push(result[2].absolutePath);
            //   this.idcardBack = result[3].absolutePath;
            //   this.idcardList3.push(result[3].absolutePath);
            var first = result.filter((item) => item.fileType === 'ENTRUSTMENT')
            this.bailmentImg = first[0].absolutePath
            this.bailmentList.push(first[0].absolutePath)
            var second = result.filter(
              (item) => item.fileType === 'BUSINESS_LICENSE'
            )
            this.licenseImg = second[0].absolutePath
            this.licenseList1.push(second[0].absolutePath)
            var third = result.filter(
              (item) => item.fileType === 'BOSS_IDCARD_FRONT'
            )
            this.idcardFront = third[0].absolutePath
            this.idcardList2.push(third[0].absolutePath)
            var fourth = result.filter(
              (item) => item.fileType === 'BOSS_IDCARD_BACK'
            )
            this.idcardBack = fourth[0].absolutePath
            this.idcardList3.push(fourth[0].absolutePath)
          }
        })
        .catch((error) => {})
    },
    //返回
    goBack() {
      this.$router.push('/home/interfacePlatform/accountManageList')
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/interfacePlatform/accountManageList',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    toUpdate() {
      this.dialogFormData.id = this.id
      this.typeName = this.companyInfo.inputTypeName
      this.dialogFormData.type = 'INPUT'
      this.dialogFormData.name = this.companyInfo.name
      this.dialogFormData.linkman = this.companyInfo.linkman
      this.dialogFormData.tel = this.companyInfo.tel
      this.dialogFormData.enabled = this.companyInfo.enabled
      this.dialogFormData.status = this.companyInfo.status
      this.dialogFormData.username = this.companyInfo.username
      this.dialogFormData.password = this.companyInfo.password
      this.dialogVisible = true
    },
    toStop() {
      let msg = ''
      let icon = ''
      let enable = ''
      if (this.companyInfo.enabled === 'ENABLED') {
        msg = '应用停用后，用户将无法上传接口数据，是否确定停用?'
        icon = 'warning'
        enable = 'DISABLE'
      } else {
        msg = '启动该账号，是否确定启用?'
        icon = 'info'
        enable = 'ENABLED'
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: icon,
      })
        .then(() => {
          this.enable(this.id, enable)
        })
        .catch(() => {})
    },
    enable(id, enable) {
      this.axios({
        method: 'post',
        url: 'api-m/inputUser/base/v1/enable',
        data: {
          id: id,
          // enable:"DISABLE"
          enable: enable,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '保存成功',
            })
            this.getDetail(this.id)
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    toDel() {
      this.$confirm('账号删除后，用户将无法登录系统，是否确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.toDelete(this.id)
        })
        .catch(() => {})
    },
    toDelete(id) {
      this.axios({
        method: 'post',
        url: 'api-m/inputUser/base/v1/delete',
        data: {
          id: id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              type: 'success',
              message: '删除成功',
            })
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {})
    },
    cancel() {
      this.dialogVisible = false
    },
    saveFrom() {
      this.$refs.dialogFormData.validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          let vm = this
          vm.axios({
            method: 'post',
            url: 'api-m/inputUser/base/v1/update',
            data: this.dialogFormData,
          })
            .then(
              (res) => {
                this.isSaveLoading = false
                if (!res.data.hasError) {
                  this.$message({
                    message: '保存成功',
                    type: 'success',
                  })
                  this.dialogVisible = false
                  this.getDetail(this.id)
                } else {
                  this.$message({
                    message: res.data.errorMsg,
                    type: 'error',
                  })
                }
              },
              (res) => {
                this.isSaveLoading = false
                this.$message({
                  message: '审核失败',
                  type: 'error',
                })
              }
            )
            .catch((error) => {})
        }
      })
    },
  },
}
</script>

<style scoped lang="less">
.container {
  .topCon {
    line-height: 54px;
    height: 54px;
    // padding: 0 24px;
    background-color: #fff;
  }
  .topTitle {
    padding: 0 24px;

    position: relative;
    border-bottom: 0.5px solid #e3e7e9;
    h2 {
      line-height: 50px !important;
      height: 50px;
      font: bold 18px Microsoft YaHei;
      color: #333333;

      .iconfanhui1 {
        font-size: 20px;
        margin-right: 6px;
        cursor: pointer;
      }
    }
  }
  .noExplain {
    padding: 0;
    padding-left: 24px;
    height: 67px;
    line-height: 67px;
    h2 {
      line-height: 1;
      height: 67px;
      line-height: 67px;
    }
    .btn {
      top: 16px;
    }
  }
  .mainCon {
    top: 197px;
    padding: 24px;
    .itemTitle {
      font-size: 18px;
      // border-bottom: 1px solid #DEE5F4;
      line-height: 50px;
    }
    .checkResultBox {
      padding: 24px;
      background: #f5f7fa;
      i {
        vertical-align: middle;
        font-size: 36px;
      }
      .resultInfo {
        display: inline-block;
        margin-left: 15px;
        .resultTop {
          color: #333;
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 8px;
        }
        .resultBottom {
          color: #666;
          span {
            margin-right: 20px;
            font-size: 14px;
          }
        }
      }
      .companyInfo {
        margin-top: 40px;
      }
    }
    .companyInfoBox {
      margin-top: 25px;
      .itemInfo {
        font-size: 14px;
        .el-col {
          margin-top: 18px;
          label {
            width: 126px;
            text-align: right;
            display: inline-block;
            color: #666;
          }
          span {
            color: #151515;
          }
        }
      }
    }
    .applyInfoBox {
      margin-top: 25px;
      .yellow {
        color: #f9a243;
      }
      .imgBoxs {
        padding: 24px;
        text-align: center;
        .itemBox {
          font-size: 14px;
          display: inline-block;
          .imgBox {
            width: 200px;
            height: 200px;
            background: rgba(222, 229, 244, 0.3);
            margin-bottom: 10px;
            span {
              color: #333;
              font-size: 14px;
            }
          }

          .licenseBox {
            .el-image {
              margin-top: 11.5px;
            }
          }
          .idcardBox {
            .el-image {
              margin-top: 46.5px;
            }
          }
        }
        .itemBox:nth-child(3) {
          margin-right: 0px;
        }
      }
    }
    .backBtn {
      width: 136px;
      margin-top: 20px;
    }
  }
  .actionBtn {
    height: 30px !important;
    line-height: initial !important;
    padding: 0 20px !important;
  }
}
</style>
